import { Button, Result } from 'antd';
import { FormattedMessage, Link } from 'umi';
import React from 'react';
import styles from './index.less';
import { useIntl } from '@/.umi/plugin-locale/localeExports';

const actions = (
  <div className={styles.actions}>
    <a href="">
      <Button size="large" type="primary">
        <FormattedMessage id="pages.registerResult.viewMailbox" />
      </Button>
    </a>
    <Link to="/">
      <Button size="large">
        <FormattedMessage id="pages.registerResult.backHome" />
      </Button>
    </Link>
  </div>
);

const RegisterResult = ({ location }) => {
  const intl = useIntl();

  return (
    <Result
      className={styles.registerResult}
      status="success"
      title={
        <div className={styles.title}>
          <FormattedMessage
            id="pages.registerResult.msg"
            values={{
              email: location?.state?.account || 'AntDesign@example.com',
            }}
          />
        </div>
      }
      subTitle={intl.formatMessage({
        id: 'pages.registerResult.activationEmail',
      })}
      extra={actions}
    />
  );
};

export default RegisterResult;
